<template>
    <div class="container">
        <div class="top-search">
            <input class="search-input" placeholder="请输入关键词搜索" type="text"/>
            <button class="search-btn"></button>
        </div>
        <div class="addr-list">
            <div @click="currentAddr = 0" class="addr-cell with-grey-bottom-border active">
                所在位置
            </div>
            <div :class="{
                  'addr-cell': true,
                  'with-grey-bottom-border': true,
                   active: item.id === currentAddr
                  }"
                    @click="currentAddr = item.id"
                    v-for="item in addrList"
            >
                上海市上海市中关村科技大厦
                <img
                        v-if="item.id === currentAddr"
                        src="@/assets/发动态-选所在位置-assets/勾.png"
                        alt=""
                />
            </div>
        </div>
    </div>
</template>

<script>
    // import wx from "weixin-js-sdk";
    export default {
        data() {
            return {
                addrList: [{id: 1}, {id: 2}, {id: 3}, {id: 4}],
                currentAddr: 0,
            };
        },
        mounted(){


        }
    };
</script>

<style lang="less" scoped>
    .container {
        .top-search {
            background-color: #fff;
            padding: 0.3rem 3.33%;
            width: 100%;
            position: relative;

            .search-input {
                box-sizing: border-box;
                width: 100%;
                height: 1.4rem;
                border: none;
                vertical-align: top;
                font-size: 0.65rem;
                padding: 0 0 0 4.22%;
                border-radius: 0.16rem;
                background-color: rgb(245, 245, 245);
                font-size: "微软雅黑";
            }

            .search-btn {
                position: absolute;
                width: 1rem;
                height: 1rem;
                right: 0.8rem;
                top: 0.5rem;
                padding: 0;
                border: 0;
                background: none;
                background-image: url("../../assets/商城首页-assets/shousuo.png");
                background-repeat: no-repeat;
                background-size: 60% 60%;
                background-position: 50% 50%;
            }
        }

        .addr-list {
            background: #fff;
            height: calc(100% - 2.4rem);
            margin-top: 0.3rem;
            padding: 0 3.2%;
            overflow: auto;

            .addr-cell {
                position: relative;
                height: 1.8rem;
                line-height: 1.8rem;
                font-size: 0.64rem;
                color: #444444;

                img {
                    position: absolute;
                    width: 0.64rem;
                    right: 0;
                    top: 0.8rem;
                }
            }

            .active {
                color: #3393ff;
            }
        }
    }
</style>
